<!--
    上下选择组件
-->
<template>
    <div class="ivu-card ivu-card-bordered ivu-card-dis-hover select-list upDown-list">
        <div class="ivu-card-head">
            <div v-html="title"></div>
        </div>
        <!---->
        <div class="ivu-card-body select-list-body selected-body">
            <template v-if="data && data.length">
                <div v-for="(item,index) in data" v-if="dataStatus[index]" class="item" :class="{active:index === selectIndex}" :key="item.id" @click="selectRow($event,index)">
                    <slot name="option" :item="item">
                        {{item.name}}
                    </slot>
                    <Button class="pull-right" icon="minus" type="ghost" size="small" @click="rowDown(index)"></Button>

                </div>
            </template>
            <div v-else>
                请先下表选择数据
            </div>
        </div>
        <div class="ivu-card-body select-list-body">
            <!--
                        <div class="search-line">
                            <searchInput></searchInput>
                        </div>
                        -->
            <template v-if="data && data.length">
                <div v-for="(item,index) in data" v-if="!dataStatus[index]" :key="item.id">
                    <slot name="option" :item="item">
                        {{item.name}}
                    </slot>
                    <Button class="pull-right" icon="plus" type="ghost" size="small" @click="rowUp(index)"></Button>
                </div>
            </template>
            <div v-else>
                暂无数据
            </div>
        </div>
    </div>
</template>

<script>
import searchInput from '@/element/searchInput'
export default {
    name: 'SelectPanel',
    props: {
        hasCheck: {
            default: false
        },
        hasAction: {
            default: false
        },
        title: {},
        model: {},
        data: {
            default: []
        },
        value: {
            default: null
        },
        initIndex: {
            default: null
        }
    },
    computed: {

    },
    data() {
        return {
            tableModel: {},
            //数据上下状态，在上则为true，否则为false
            dataStatus: [],
            selectIndex: this.initIndex == null ? null : parseInt(this.initIndex)
        }
    },
    watch: {
        selectIndex(v) {
            this.$emit('selectChange', v);
        },
        value(v) {
            var list = []
            for (let i in v) {
                list[v[i]] = true
            }
            this.$set(this, 'dataStatus', list)
        }
    },
    methods: {
        selectRow(e, index) {
            //阻止去除行按钮触发选中函数
            if (e.target === e.currentTarget && this.selectIndex !== index) {
                this.selectIndex = index;
            }
        },
        rowUp(index) {
            this.$set(this.dataStatus, index, true)
            this.$emit('rowUp', index);
            //若无选中行则自动选中新添加的行
            if (this.selectIndex == null) {
                this.selectIndex = index
            }
        },
        rowDown(index) {
            this.$set(this.dataStatus, index, false)
            this.$emit('rowUp', index);
            //如果去除的是选中行，则循环已选中行，选中首个
            if (this.selectIndex === index) {
                var thisIndex = null
                for (let i in this.dataStatus) {
                    if (this.dataStatus[i]) {
                        this.selectIndex = parseInt(i);
                        thisIndex = i
                        break
                    }
                }
                if (thisIndex === null) {
                    this.selectIndex = null
                }
            }
        },
        rowClass(index) {
            return index === this.selectIndex ? { 'active': true } : {}
        }
    },
    created() {
        if (this.value) {
            for (let i in this.value) {
                this.$set(this.dataStatus, this.value[i], true)
            }
        }
    },
    components: {
        searchInput
    }
}
</script>

<style lang="less">
.select-list.upDown-list {
    .ivu-card-head {
        padding: 12px 16px;
    }
    .select-list-body {
        padding: 0;
        font-size: 10px;
        min-height: 30px;
        &.selected-body {
            border-bottom: 1px solid #2d8cf0;
            margin-bottom: -1px;
        }
        .item {
            word-break: break-all;
        }
        .search-line {
            height: 30px;
            padding: 0;
            &:hover {
                background-color: transparent;
            }
            .search-input {
                width: 100%;
                padding: 0;
                .ivu-input-group-append {
                    border-right: none;
                }
                .ivu-input {
                    border-radius: 0;
                }
                .ivu-input-group-append {
                    border-radius: 0;
                }
                button.ivu-btn {
                    padding-right: 14px;
                    padding-left: 10px;
                }
            }
        }
        >* {
            word-break: break-all;
            padding: 6px 16px;
            border-top: 1px solid #e9eaec;
            cursor: pointer;
            button.ivu-btn {
                padding: 1px 6px;
                margin-top: -2px;
                margin-right: -11px;
            }
            &:first-child {
                border-top: none
            }
            &:hover {
                /*background-color: #fff;*/
            }
            &.active {
                background-color: #fff;
                border-left: 4px solid #2d8cf0;
                padding-left: 12px;
            }
        }
    }
}
</style>
